<template>
  <div>
    <div class="main">
      <div class="read-box" v-for="(item,index) in dataList" :key="index" @click="goToRead(item)">
        <img :src="item.cover" alt="" width="115px" height="78px" />
        <p>{{item.name}}</p>
        <div class="sele" v-show="options" @click="delopt(item)">
          <img src="../../../../../static/shujia/xunzhong.png" alt="" width="25px" height="25px" v-if="item.active" />
          <img src="../../../../../static/shujia/null.png" alt="" width="25px" height="25px" v-else />
        </div>
        </div>
        <div v-show='options' class="myread-tabbar">
          <span class="left" @click="delAllBook">
            全部选中
          </span>
          <span class="right" @click="delbookinfo">
            删除
          </span>
        </div>
      </div>
    </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import api from "./../../../../api/api.js";
import baseurl from "./../../../../api/baseurl.js";
export default {
  props: ["options"],
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      flag: false
    };
  },
  created() {
    this.userid = localStorage.getItem("userid");
    this.getinfo();
  },
  methods: {
    goToRead(item) {
      if (this.options) {
        this.delopt(item);
      } else {
        sessionStorage.setItem("readdata", JSON.stringify(item));
        this.$router.push({
          name: "readcontent",
          params: { type: 1 }
        });
      }
    },
    delopt(item) {
      if (this.options) {
        console.log(item);
        item.active = !item.active;
      }
    },
    delAllBook() {
      this.flag = !this.flag;
      if (this.flag) {
        const dataList = this.dataList;
        dataList.map(item => (item.active = true));
        this.dataList = dataList;
      } else {
        const dataList = this.dataList;
        dataList.map(item => (item.active = false));
        this.dataList = dataList;
      }
    },
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "collection/selectCollection",
        params: {
          //收藏类型 例如：1 图书 2悦读 3 视听 4 报纸 5 期刊 ...
          userid: this.userid,
          pageNo: this.pageIndex,
          columntype: 2,
          pageSize: 30
        }
      })
        .then(response => {
          if (response.status == 200) {
            const dataList = response.data.date.list;
            dataList.map(book => (book.active = false));
            this.dataList = dataList;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    delbookinfo() {
      const delbookid = [];
      for (let item of this.dataList) {
        if (item.active == true) {
          delbookid.push(item.id);
        }
      }
      const delid = delbookid.join(",");
      console.log(delid);
      if (delid.length == 0) {
        Toast("请选择删除项");
        return;
      }
      MessageBox.confirm("", "确认删除收藏嘛？")
        .then(action => {
          this.$http({
            method: "post",
            url: baseurl.urls + "/collection/deleteCollection",
            params: {
              id: delid
            }
          })
            .then(response => {
              if (response.status == 200) {
                this.getinfo();
                Toast("删除收藏成功");
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.main .read-box {
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  margin-bottom: 10px;
  position: relative;
}

.main .read-box img {
  margin: 10px 0;
  margin-left: 10px;
  font-size: 15px;
}
/*选择图片*/
.main .sele {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 20px;
  top: -20px;
}
.sele > img {
  padding: 10px;
}
.main .read-box p {
  margin-left: 22px;
  padding-right: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.main .myread-tabbar {
  width: 100%;
  display: flex;

  align-items: center;
  height: 50px;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  /*left: 0;*/
}
.main .myread-tabbar .left {
  width: 40%;

  padding: 15px 0;
  text-align: center;
}
.main .myread-tabbar .right {
  width: 60%;
  background-color: #e60012;
  color: #ffffff;
  padding: 15px 0;
  text-align: center;
}
.mint-cell-wrapper {
  font-size: 14px;
}
</style>